<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!--bootstrap插件-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
	<link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
	<!--字体插件-->
	<link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
	<link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
	<!--ztree-->
	<link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
	<!--common-->
	<link href="/static/css/common.css" rel="stylesheet"/>
	<!--帮助手册样式-->
	<link rel="stylesheet" type="text/css" href="/static/css/help/document.css"/>
	<!--代码高亮-->
	<link type="text/css" rel="stylesheet" href="/static/plugin/SyntaxHighlighter/styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="/static/plugin/SyntaxHighlighter/styles/shCoreDefault.css"/>
	<link type="text/css" rel="stylesheet" href="/static/plugin/SyntaxHighlighter/styles/shThemeDefault.css"/>
	<title>输入选择框</title>

<script>

</script>
</head>

<body style="padding:5px 10px; box-sizing:border-box; background-color:white;">
<a href="#" target="_blank" class="showAtTop">显示单页</a>
<table class="docTable">
	<tr class="docTitle">
		<td colspan="2">
			<i class="fa fa-caret-down"> </i>&nbsp;&nbsp;&nbsp;&nbsp;输入选择框
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<p>JO提供的输入选择框插件，对常规input标签的增强。</p>
		</td>
	</tr>
</table>

<table class="docTable">
	<tr class="docTitle">
		<td colspan="2"><i class="fa fa-caret-down"> </i>属性</td>
	</tr>

	<tr>
		<td><attr><string/>id</attr></td>
		<td>对象唯一标识</td>
	</tr>
	<tr>
		<td><attr><string/>idInp</attr></td>
		<td>存放id值的输入框id</td>
	</tr>
	<tr>
		<td><attr><string/>textInp</attr></td>
		<td>存放文本值的输入框id</td>
	</tr>
	<tr>
		<td><attr><string/>idField</attr></td>
		<td>id值对应的字段名</td>
	</tr>
	<tr>
		<td><attr><string/>textField</attr></td>
		<td>text值对应的字段名</td>
	</tr>
	<tr>
		<td><attr><arr/>data</attr></td>
		<td>下拉选项数据</td>
	</tr>
	<tr>
		<td><attr><arr/>matchField</attr></td>
		<td>联想提示数据过滤使用的字段<br>可以直接在input标签中使用,具体请参考示例</td>
	</tr>
	<tr>
		<td><attr><string/>matchFailTips</attr></td>
		<td>关键字匹配为空的提示信息</td>
	</tr>
	<tr>
		<td><attr><obj/>checkedItem</attr></td>
		<td>当前被选中的选项</td>
	</tr>
	<tr>
		<td><attr><boolean/>editable</attr></td>
		<td>是否可编辑,默认可以在输入框输入,如果为false,则只允许选中下拉列表中的选项</td>
	</tr>
	<tr>
		<td><attr><iFunc/>choiceCallback</attr></td>
		<td>选项选择回调函数,参数1为选中的对象,参数2为joinput对象</td>
	</tr>
	<tr>
		<td><attr><iFunc/>clearCallback</attr></td>
		<td>清空内容回调函数,参数1为joinput对象</td>
	</tr>
</table>

<table class="docTable">
	<tr class="docTitle">
		<td colspan="2">
			<i class="fa fa-caret-down"> </i>方法
		</td>
	</tr>
	<tr>
		<td><func><obj/>JoInputSimple(id, data, textField, matchFieldArr)</func></td>
		<td>构造函数:基本的输入选择框(带提示功能的输入框)
			<br>通常用在需要提示的输入框场景,可以选择提示内容,也可以自行编辑
		</td>
	</tr>
	<tr>
		<td><func><obj/>JoInput(options)</func></td>
		<td>构造函数:带联想提示的下拉列表
			<br>通常用在需要联想提示的下拉列表场景,通常只允许选择下拉列表项,不允许自行编辑
		</td>
	</tr>
	<tr>
		<td><func><obj/>clear()</func></td>
		<td>
			清空下拉选项
		</td>
	</tr>

</table>
<!--demo-->
<div class="eg">
	带联想提示的下拉选择框(select组件有提示需求的可以使用这个):<input type="text" class="joInput form-control" name="name" id="name" matchField="id,name,type"/>
	基础版输入选择框(input输入框有提示需求的可以使用这个):<input type="text" class="joInput form-control" name="name2" id="name2"/>
	html部分:
	<pre name="code" class="brush:html;toolbar:false;">
        &lt;input type="text" class="joInput form-control" name="name" id="name" matchField="id,name,type"/>
        &lt;input type="text" class="joInput form-control" name="name2" id="name2"/>
	</pre>
	js部分:
	<pre name="code" class="brush:js;toolbar:false;">
		$(function(){
			jo.postAjax('/ums/dept/getPage', {}, function(json){
				JoInput({id:'name', data:json.data, idInp:'', textInp:'name', idField:'id', textField:'name', editable:false, matchField:['id','name']});
			});
			JoInputSimple('name2', '你好,你好啊,421,789,169');
		});
	</pre>
</div>

</body>

<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>

<!--帮助手册js-->
<script src="/static/js/help/document.js"></script>
<!--代码高亮-->
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shCore.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushCSharp.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushPhp.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushJScript.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushJava.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushVb.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushSql.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushXml.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushDelphi.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushPython.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushRuby.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushCss.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushCpp.js"></script>
<script class="javascript">
	highLight();
</script>
<script type="text/javascript">
	$(function(){
		jo.postAjax('/ums/dept/getPage', {}, function(json){
			JoInput({id:'name', data:json.data, idInp:'', textInp:'name', idField:'id', textField:'name', editable:false, matchField:['id','name']});
		});
		JoInputSimple('name2', '你好,你好啊,421,789,169');
	});
</script>
</html>
